<template>
  <div class="top-bar-view">
    <div class="but-view">
      <div v-if="isshowadd" class="but-1 zhgreenbut1" :class="{'not-click':!isclick.add}" @click="selectbutmet(0)">
        <div class="but1-1 colorbut1-1">添加</div>
      </div>
      <div v-if="isshowedit" class="but-1 greenbut1" :class="{'not-click':!isclick.edit}" @click="selectbutmet(1)">
        <div class="but1-1 colorbut1-1">修改</div>
      </div>
      <div class="but-1 yellowbut1" :class="{'not-click':!isclick.see}" @click="selectbutmet(2)">
        <div class="but1-1 colorbut1-1">页面预览</div>
      </div>
      <div class="but-1 bluebut1" :class="{'not-click':!isclick.complete}" @click="selectbutmet(3)">
        <div class="but1-1 colorbut1-1">完成</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TopBarBut",
  props: {
    isshowadd: {
      type: Boolean,
      default: () => true
    },
    isshowedit: {
      type: Boolean,
      default: () => true
    },
    isshowsee: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      isclick: {
        add: true,
        edit: true,
        see: true,
        complete: false
      }
    }
  },
  methods: {
    selectbutmet(i) {
      if (i === 0 && this.isclick.add) {
        this.isclick = {
          add: false,
          edit: false,
          see: true,
          complete: true
        }
        this.$message.success("当前状态：增加")
        this.$emit('getstau', 'add')
      }
      if (i === 1 && this.isclick.edit) {
        this.isclick = {
          add: false,
          edit: false,
          see: true,
          complete: true
        }
        this.$message.success("当前状态：修改")
        this.$emit('getstau', 'edit')
      }
      if (i === 2 && this.isclick.see) {
        this.$message.success("查看大屏")
        this.$emit('getstau', 'see')
      }
      if (i === 3 && this.isclick.complete) {
        this.isclick = {
          add: true,
          edit: true,
          see: true,
          complete: false
        }
        this.$emit('getstau', 'complete')
        this.$message.success("点击了确认")
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.top-bar-view{
    width: 100%;
    height: 50px;
    background-color: #00171c;
    margin-bottom: 2px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .but-view{
        display: flex;
        .but-1{
            height: 32px;
            border-radius: 5px 5px 5px 5px;
            padding: 2px;
            margin-right: 8px;
            color: #FFFFFF;
            cursor: pointer;
            font-size: 16px;
            font-weight: 400;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            .but1-1{
                height: 26px;
                line-height: 26px;
                box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.26);
                border-radius: 5px 5px 5px 5px;
                padding: 0 10px;
                letter-spacing: 1px;
                white-space: nowrap;
            }
        }
        .but-1:hover{
            font-size: 17px;
            font-weight:600;
        }
        .zhgreenbut1{
            background: linear-gradient(180deg,  #49e131 0%, #8ffc7e 100%);
            border: 1px solid #5BFFE9;
            .colorbut1-1{
                background: #49e131;
            }
        }
        .greenbut1{
            background: linear-gradient(180deg, #008A80 0%, #00988E 100%);
            border: 1px solid #5BFFE9;
            .colorbut1-1{
                background: #0CB9AE;
            }
        }
        .yellowbut1{
            background: #D88D00;
            border: 1px solid #FFD756;
            .colorbut1-1{
                background: #E6A000;
            }
        }
        .bluebut1{
            background:  linear-gradient(180deg, #21A3CC 0%, #00799E 100%);
            border: 1px solid #2ACCFF;
            .colorbut1-1{
                background: #02C1FD;
            }
        }
    }
}
.not-click{
  // pointer-events: none;
  cursor:not-allowed !important;
}
</style>
